Assignment: SDE Frontend

Okay, I've updated the "Evaluation Criteria" to include "Good Commit History."

**Frontend Animation Challenge: GrowthX Club**

**Objective:**

The goal of this assignment is to replicate a specific animation from GrowthX Club using HTML, CSS, and JavaScript. You are encouraged to showcase your frontend skills in creating smooth, performant, and accurate animations.

**Context:**

At GrowthX Club, we value engaging and dynamic user experiences. This task is designed to assess your ability to translate a visual concept (an animation) into a functional web implementation.

**Video to Replicate:**

[**IMPORTANT**: Please insert the direct link to the video of the animation you want the candidate to implement here. For example: `https://example.com/path/to/your/animation_video.mp4`]

If a specific video link is not provided above by the GrowthX team, please choose an interesting animation from the [https://growthx.club](https://growthx.club) website, record it, and use that as your reference. Clearly state which animation you chose in your Loom recording.

**Task Details:**

1. **Implement the Animation:** Recreate the animation shown in the provided video (or the one you've chosen from growthx.club) using HTML, CSS, and JavaScript.

2. **Technology Stack:**

* You can use any React framework (e.g., Next.js, Create React App, Vite + React).

* You are free to use any CSS library or preprocessor (e.g., Tailwind CSS, SCSS, CSS Modules).

* Framer Motion is an acceptable library for animations if you choose to use it.

3. **Constraints:**

* **No Dynamic Imports:** The animation and its related assets should load and be ready as soon as the page loads. Do not use dynamic `import()` statements for components or assets critical to the initial animation.

* **Instant Load & Performance:** The animation should start playing or be interactive immediately on page load. Prioritize performance.

* **No Lottie:** You are not allowed to use Lottie or any Lottie-like libraries that directly convert design files into web animations. The animation should be built with code.

4. **AI Usage:** You are encouraged to use AI tools (e.g., GitHub Copilot, ChatGPT) to assist you in development, debugging, or learning. If you use AI, please briefly mention how it helped you in your Loom recording.

**Deliverables:**

1. **GitHub Repository:** A public GitHub repository containing the source code for your implementation. Please ensure the `README.md` has clear instructions on how to run the project locally.

2. **Loom Recording:** A short Loom (or similar screen recording) video (max 5-7 minutes) explaining:

* Your approach to implementing the animation.

* Key code sections or logic you are proud of or found challenging.

* A brief demonstration of the working animation.

* (If applicable) How you used AI tools in your process.

* (If applicable) Which animation you chose if a specific video was not provided in the assignment.

**Time Limit:**

You have **1 day (24 hours)** to complete this assignment from the time you receive it.

**Evaluation Criteria:**

* **Accuracy:** How closely does your implementation match the animation in the reference video?

* **Code Quality:** Is the code well-structured, readable, and maintainable?

* **Performance:** Is the animation smooth and performant?

* **Adherence to Constraints:** Were all the specified constraints followed?

* **Good Commit History:** Are the git commits well-scoped, clearly messaged, and do they show a logical progression of work?

* **Explanation:** Clarity and depth of your explanation in the Loom video.

Good luck, and we look forward to seeing your creative solution!